<template>
  <div>
    <el-card>
      <div slot="header">
        <div class="m-b">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: homePath }">设备管理</el-breadcrumb-item>
            <el-breadcrumb-item>设备详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <el-form label-width="120px" class="el-form" :model="formData" label-position="right">
        <!--<el-form-item label="设备ID">{{formData.deviceId}}</el-form-item>-->
        <el-form-item label="设备名称">{{formData.name}}</el-form-item>
        <el-form-item label="项目名称">{{projectName}}</el-form-item>
        <el-form-item label="设备描述">{{formData.description}}</el-form-item>
        <el-form-item label="设备地址">{{formData.address}}</el-form-item>
        <el-form-item label="经纬度">{{formData.longitude}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{formData.latitude}}</el-form-item>
        <el-form-item label="设备朝向">
          <span v-if="formData.direction == 'EAST'">东</span>
          <span v-if="formData.direction == 'WEST'">西</span>
          <span v-if="formData.direction == 'SOUTH'">南</span>
          <span v-if="formData.direction == 'NORTH'">北</span>
          <span v-if="formData.direction == 'NORTH_EAST'">东北</span>
          <span v-if="formData.direction == 'SOUTH_EAST'">东南</span>
          <span v-if="formData.direction == 'NORTH_WEST'">西北</span>
          <span v-if="formData.direction == 'SOUTH_WEST'">西南</span>
        </el-form-item>
        <el-form-item label="设备图片">
          <img v-if="imageUrl != ''" :src="imageUrl" style="width: 300px; height: 300px;"/>
        </el-form-item>
        <el-form-item label="设备二维码">
          <img v-if="qrCodeUrl != ''" :src="qrCodeUrl" style="width: 300px; height: 300px;"/>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button type="default" icon="el-icon-back" @click="goBack">返 回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import {get} from "@/api/deviceManage";
  import {getImg} from "@/api/common";

  export default {
    name: "DeployDevice",
    data() {
      return {
        deviceId: "",
        formData: {},
        projectOptions: [],
        imageUrl: "",
        qrCodeUrl: "",
        projectName: "",
      homePath:"/deviceManage",
      };
    },
    created() {
      this.deviceId = this.$route.query.deviceId;
        this.page = this.$route.query.page;
    this.search = this.$route.query.search;
    this.homePath = `${this.homePath}?page=${this.page}&search=${this.search}`
    },
    mounted() {
      this.getMessage();
    },
    methods: {
      getMessage() {
        const that = this;
        let data = {
          deviceId: this.deviceId
        };
        get(data).then(res => {
          //console.log(res);
          if (res["code"] == 200) {
            that.formData = res.value;
            if (res.value.project != null) {
              that.projectName = res.value.project.name;
            }
            if (res.value.qrCodeKey != null) {
              let data = {
                key: res.value.qrCodeKey
              };
              getImg(data).then(res => {
                if (res["code"] == 200) {
                  that.qrCodeUrl = res.value;
                }
              });
            }
            if (res.value.imageKeys.length > 0) {
              let data = {
                key: res.value.imageKeys[0]
              };
              getImg(data).then(res => {
                if (res["code"] == 200) {
                  that.imageUrl = res.value;
                }
              });
            }

          }
        });
      },
      goBack() {
      this.$router.push(this.homePath);
      }
    }
  };
</script>

<style scoped>
  .el-form {
    width: 90%;
    margin: 20px;
  }
</style>
